<template>
    <div class="list-container">
        <div class="list-item" v-for="(item, index) in todoList" :key="index">
            <div class="top">
                <span>{{ item.procDefName }}</span>
                <span @click="handleProcess(item)"><el-link type="primary" :underline="false">办理</el-link></span>
            </div>
            <div class="bottom">
                <span class="time">{{ item.createTime }}</span>
                <span class="user">{{ item.startUserName }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { listTodoProcess } from '@/api/workflow/process';

export default {
    name: "homeTool",
    data() {
        return {
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                name: null,
                category: null
            },
            total: 0,
            // 流程待办任务表格数据
            todoList: []
        };
    },
    created() {
        this.getList()
    },
    methods: {
        handleProcess(row) {
            this.$router.push({
                path: '/workflow/process/detail/' + row.procInsId,
                query: {
                    taskId: row.taskId,
                    processed: true
                }
            })
        },
        getList() {
            listTodoProcess(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.todoList = response.rows;
                this.total = response.total;
                this.$emit('total', this.total)
            });
        },
    }
};
</script>
<style scoped lang="scss">
.list-container {
    overflow-y: auto;
}

.list-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;

    .top,
    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .top {
        padding-bottom: 10px;
    }

    .bottom {

        .user,
        .time {
            font-size: 14px;
            color: #666;
        }
    }
}
</style>